<template>
  <div style="width:100%;height:600px" ref="mapRef"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from "echarts";
import chinaGeoJson from '@/assets/map.json'

onMounted(() => {
  initChart()
})

const mapRef = ref()
let myChart = null
// 基于准备好的dom，初始化echarts实例
const initChart = () => {
  myChart = echarts.init(mapRef.value);

  // 获取到的中国地图 GeoJSON 信息，用来绘制出中国地图
  echarts.registerMap('china', chinaGeoJson);

  const options = {
    title: {
      text: '中国地图',
      left: 'right'
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return params.name + ': ' + params.value;
      }
    },
    toolbox: {
      show: true,
      left: 'left',
      top: 'top',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    series: [
      {
        type: 'map',
        map: 'china',
        label: {
          show: true
        },
        data: [
          // 自己的数据，name要与上面获取的 GEOJSON 数据中的 name 值对应
          { name: '广东省', value: 99939.18 },
          { name: '浙江省', value: 62618 },
          { name: '江苏省', value: 87701.44 },
          { name: '山东省', value: 68125.4 },
          { name: '河南省', value: 47713.16 },
          { name: '四川省', value: 4655 },
          { name: '北京市', value: 30000 },
          { name: '上海市', value: 38000 },
          { name: '云南省', value: 38000 },
        ]
      }
    ]
  }

  // 绘制图表
  myChart.setOption(options);

}
</script>

<style lang="scss" scoped></style>